<template>
  <div>
    <div>
      <image class="img" :src='listData.img'></image>
      <i-button @tap="upload" type="ghost">修改图片</i-button>
      <div class="list flex">
        <div class="title">商品id</div>
        <div class="input">
          <input :value="listData.id" @blur='getId' type="number" placeholder="请输入id号码" maxlength="10" disabled style="color:gray"/>
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品名字</div>
        <div class="input">
          <input  :value="listData.name" @input='getName' type="text" placeholder="请输入商品名字" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品价格</div>
        <div class="input">
          <input :value="listData.price" @input='getPrice' type="text" placeholder="请输入商品价格" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品规格</div>
        <div class="input">
          <input :value="listData.specs" @input='getSpecs' type="text" placeholder="请输入商品规格" maxlength="10" />
        </div>
      </div>
      <div class="list flex">
        <div class="title">商品详情</div>
        <div class="input">
          <input class="textarea" :value="listData.about" @input='getAbout' type="textarea" placeholder="请输入商品详情(最多100字)" maxlength="100" auto-height/>
        </div>
      </div>
    </div>
    <div>
      <i-button @tap="sendadd" type="success">确定修改</i-button>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  components: {
    card
  },

  data () {
    return {
      listData: []
    }
  },
  beforeMount () {
    console.log(this)
    console.log(this.$mp.query.id)
    wx.cloud.database().collection('goods').where({
      id: this.$mp.query.id
    }).get({
      success: res => {
        console.log(res)
        this.listData = res.data[0]
        console.log(this.listData)
      },
      fail: console.error
    })
    // 云函数调用show获取数据
    // wx.cloud.callFunction({
    //   name: 'getgoods',
    //   data: {
    //     id: this.$mp.query.id
    //   },
    //   success: res => {
    //     console.log(res)
    //     this.listData = res.result.data[0]
    //     console.log(this.listData)
    //   },
    //   fail: console.error
    // })
  },
  methods: {
    upload () {
      var that = this
      console.log('上传文件')
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          console.log('选择了图片', res)
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          console.log('图片地址', tempFilePaths)
          that.uploadImg(res.tempFilePaths[0])
        }
      })
    },
    uploadImg (fileUrl) {
      var that = this
      wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + '.png', // 上传至云端的路径
        filePath: fileUrl, // 小程序临时文件路径
        success (res) {
          // 返回文件 ID
          console.log(res, '上传成功')
          that.listData.img = res.fileID
          console.log(that.listData.img)
        },
        fail: console.error
      })
    },
    sendadd () {
      var that = this
      if (that.listData.id && that.listData.name && that.listData.price && that.listData.specs && that.listData.about && that.listData.img) {
        var price = that.listData.price
        wx.cloud.database().collection('goods').where({
          id: this.$mp.query.id
        }).update({
          // data 字段表示需新增的 JSON 数据
          data: {
            // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
            name: that.listData.name,
            price: price,
            specs: that.listData.specs,
            about: that.listData.about,
            img: that.listData.img
          },
          success: function (res) {
          // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
            console.log(res)
            wx.navigateBack({
              delta: 2
            })
            wx.showToast({
              title: '修改成功',
              icon: 'success',
              duration: 1000
            })
          },
          fail: console.error
        })
      } else {
        wx.showToast({
          title: '请完善信息',
          icon: 'loading',
          duration: 3000
        })
      }
    },
    getName (e) {
      var that = this
      var input = e.mp.detail.value
      if (input) {
        that.listData.name = input
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getPrice (e) {
      var that = this
      var input = e.mp.detail.value
      if (input) {
        that.listData.price = input
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getSpecs (e) {
      var that = this
      var input = e.mp.detail.value
      if (input) {
        that.listData.specs = input
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    },
    getAbout (e) {
      var that = this
      var input = e.mp.detail.value
      if (input) {
        that.listData.about = input
      } else {
        wx.showToast({
          title: '不能为空',
          icon: 'loading',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style  scoped>
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img{
  width: 200rpx;
  height: 200rpx;
  margin-left: 50rpx;
  margin-top: 25rpx;
}
.list{
  height: 100rpx;
  margin-top: 20rpx;
  width: 100%;
  border: 1px solid gray;
}
.title{
  margin-left: 50rpx;
  width: 150rpx;
}
.input{
  width: 70%;
}
.textarea{
  vertical-align:top;
  outline:none;
}
[v-cloak]{
  display: none !important;
}
</style>
